<template>
  <div class="bg flex">
    <div class="left" style="width: 30%">
      <div class="line1" style="height: 50%; border: 1px solid red"></div>
      <div class="line2" style="height: 50%; border: 1px solid red">
        <leftBottom ref="refLeftBottom" />
      </div>
    </div>
    <div class="right flex-sub">
      <div class="line1" style="height: 70%; border: 1px solid red"></div>
      <div class="line2" style="height: 30%; border: 1px solid red">
        <rightLeft3 ref="resRightLeft3Data" />
      </div>
    </div>
  </div>
</template>

<script>
import rightLeft3 from "@/components/BigScreen/rightLeft3.vue";
import leftBottom from "@/components/BigScreen/leftBottom.vue";

export default {
  name: "lddcharts",
  components: { rightLeft3,leftBottom },
  data() {
    return {};
  },
  mounted() {this.init()},
  updated() {this.init()},
  methods: {
    init(){
      const res = [
        {name:'cq',value:123},
        {name:'sh',value:233},
        {name:'bj',value:323},
      ]
      this.$refs.refLeftBottom.update(res);
    },
  },
};
</script>

<style scoped lang="scss">
.bg {
  background: url("@/assets/img/bg.png") no-repeat;
  width: 100vw;
  height: 100vh;
  padding: 20px;
}
</style>
